<template>
  <div class="girl">
    <h3>girl</h3>
    <h4>父传子: {{ car }}</h4>
    <h4>兄弟组件传过来的数据: {{ msg }}</h4>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import mitter from '@/utils/mitter.ts'
defineProps(['car'])

const msg = ref('初始值')

//绑定事件
mitter.on('send-data', (value) => {
  console.log('send-data', value)
  msg.value = value
})

onUnmounted(() => {
  console.log('off')
  //mitter.off('send-data')
  mitter.all.clear()
})
</script>

<style scoped>
.girl {
  background-color: rgb(242, 242, 121);
  width: 90%;
  height: 200px;
  margin-top: 10px;
  border: 1px solid black;
  border-radius: 10px;
}
</style>